---
description: Instead of starting from scratch, you can use the Chrome Storage Quickstart to get a basic extension up and running quickly.
---

# Quickstart with Chrome Storage

## Intro

Chrome storage is a powerful mechanism for persisting data in your extension. It's essential in MV3 where persistent background pages, which used to be the place developers stored persistent data, no longer exist.

## Plasmo Storage

We built a [library](/framework/storage) on top of the `chrome.storage` API that makes it much easier to use, especially if you're writing a React app.

## Storage Hooks

Our library provides React hooks for reading and writing to storage.

Here's some example usage:

```tsx filename="popup.tsx"
import { useStorage } from "@plasmohq/storage/hook"

function IndexPopup() {
  const [openCount] = useStorage<number>("open-count", (storedCount) =>
    typeof storedCount === "undefined" ? 0 : storedCount + 1
  )

  const [checked, setChecked] = useStorage("checked", true)

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <p>Times opened: {openCount}</p>
      <input
        type={"checkbox"}
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    </div>
  )
}

export default IndexPopup
```

```tsx filename="options.tsx"
import { useStorage } from "@plasmohq/storage/hook"

function IndexOptions() {
  const [openCount] = useStorage<number>("open-count")

  const [checked] = useStorage("checked")

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <p>Times opened: {openCount}</p>
      <input type={"checkbox"} readOnly checked={checked} />
    </div>
  )
}

export default IndexOptions
```

## Full Example

For the complete example, check out [with-storage](https://github.com/PlasmoHQ/examples/tree/main/with-storage) in the examples GitHub repository.
